<!--
 * @Descripttion: 文件导入
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月24日11:30:03
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<slot :open="open">
		<el-button v-if="!isTest" type="primary" :size="size" plain @click="open" icon="el-icon-upload">导入</el-button>   
		<el-button v-if="isTest" text type="primary" size="small" @click="open" >导入</el-button>
	</slot>
	<el-dialog v-model="dialog" title="导入" :width="550" :close-on-click-modal="false" append-to-body destroy-on-close>
		<el-progress v-if="loading" :text-inside="true" :stroke-width="20" :percentage="percentage"
			style="margin-bottom: 15px;" />
			
		<div v-loading="loading">
			<el-upload ref="uploader" drag :accept="accept" :maxSize="maxSize" :limit="1" :data="data"
				:show-file-list="false" :http-request="request" :before-upload="before" :on-progress="progress"
				:on-success="success" :on-error="error">
				<slot name="uploader">
					<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
					<div class="el-upload__text">
						将文件拖到此处或 <em>点击选择文件上传</em>
					</div>
				</slot>
				<template #tip>
					<div class="el-upload__tip" style="padding: 5px 0px ;">
						<el-link v-if="templateUrl" :href="templateUrl" target="_blank" type="primary" :underline="false" style="margin-right: 10px;">下载导入模板</el-link>
						<template v-if="tip">{{ tip }}</template>
						<template v-else>请上传小于或等于 {{ maxSize }}M 的 {{ accept }} 格式文件</template>
					</div>
				</template>
			</el-upload>
			<el-form v-if="$slots.form" inline label-width="100px" label-position="left" style="margin-top: 18px;">
				<slot name="form" :formData="formData"></slot>
			</el-form>
		</div>
	</el-dialog>
</template>

<script>
import config from '@/config'
// import publicjs from "@/api/model/publicjs";
import axios from "axios";
export default {
	emits: ['success'],
	props: {
		apiObj: { type: Object, default: () => { } },
		data: { type: Object, default: () => { } },
		accept: { type: String, default: ".xlsx" },
		maxSize: { type: Number, default: 10 },
		tip: { type: String, default: "" },
		templateUrl: { type: String, default: "" },
		objName: { type: String, default: "" },
		importUrl:{ type: String, default: "" },
		size:{type: String, default: ""},
		isTest:{type: Boolean, default: false}
	},
	data() {
		return {
			dialog: false,
			loading: false,
			percentage: 0,
			formData: {}
		}
	},
	mounted() {

	},
	methods: {
		open() {
			this.dialog = true
			this.formData = {}
		},
		close() {
			this.dialog = false
		},
		before(file) {
			const maxSize = file.size / 1024 / 1024 < this.maxSize;
			if (!maxSize) {
				this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
				return false;
			}
			this.loading = true
		},
		progress(e) {
			this.percentage = e.percent
		},
		success(res, file) {
			this.$refs.uploader.handleRemove(file)
			this.$refs.uploader.clearFiles()
			this.loading = false
			this.percentage = 0
			this.$emit('success', res, this.close)
		},
		error(err) {
			this.loading = false
			this.percentage = 0
			this.$notify.error({
				title: '上传文件未成功',
				message: err
			})
		},
		request(param) {
			Object.assign(param.data, this.formData)
			const data = new FormData();
			data.append("files", param.file);
			data.append("objName", this.objName);
			for (const key in param.data) {
				data.append(key, param.data[key]);
			}
			let url = `${config.API_URL}/${this.importUrl}`; //后端的接口
			try {
                axios
				.post(url, data, {
				})
				.then((result) => {
					console.log("res=>", result);
					if (result.status == 200&&result.data.status==200) {
						// eslint-disable-next-line no-debugger
						//debugger;
						//console.log(result);
						this.$emit("fatherMethod", result.data.response)
						this.$message.success("导入成功!" + result.data.msg);
						this.dialog=false;
						//let contentDisposition = result.headers["content-disposition"];
						// 这里后端给的内容中，文件名字可能是驼峰式名称的 fileName ，或者是全部小写的 filename
						// let filename = decodeURI(
						//   contentDisposition.split("fileName=")[1] ||
						//     contentDisposition.split("filename=")[1]
						// );
						//alert(contentDisposition)
						//let filename = decodeURI(contentDisposition.split("'")[2]);
						URL.revokeObjectURL(url); // 释放内存
						this.asyncLoading = false;
						this.loading = false;
						
					} else {
						this.asyncLoading = false;
						this.loading = false;
						this.$message({
							message: result.data.msg,
							type: "error",
							duration: 2000,
							dangerouslyUseHTMLString: true
						});
					}
					this.asyncLoading = false;
					this.loading = false;
				});
			
            } catch (error) {
                this.asyncLoading = false;
				this.loading = false;
                return false;
            }
			// this.apiObj.post(data, {
			// 	onUploadProgress: e => {
			// 		const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
			// 		param.onProgress({percent: complete})
			// 	}
			// }).then(res => {
			// 	param.onSuccess(res)
			// }).catch(err => {
			// 	param.onError(err)
			// })
		}
	}
}
</script>

<style></style>
